<template>
  <div>
    <!-- 宠物店铺介绍 -->
    <div class="my-5 container">
      <div class="row text-center">
        <div class="col-12 hnumber">
          <div class="lined-title">
            <span class="line"></span>
            <h4>宠物新宠</h4>
            <span class="line"></span>
          </div>
          <h3 class="mb-3">喵呜无忧的店铺</h3>
          <h5 class="text-muted">探索我们为您的爱宠准备的高质量猫狗用品，从日常护理到娱乐玩具，应有尽有。</h5>
        </div>
      </div>
      <div class="row mt-5">
        <div class="col-12 col-md-4" v-for="(item, index) in items" :key="index">
          <div class="card mb-4 shadow-sm">
            <img :src="item.img" class="card-img-top" alt="">
            <div class="card-body card-body-content">
              <span class="card-type">公司场景 part{{ index + 1 }}</span>
              <h5 class="card-title">{{ item.title }}</h5>
              <p class="card-text">{{ item.description }}</p>
            </div>
            <div class="card-feature card-body row">
              <div class="col-12 col-sm-6">
                <div class="card-feature-item d-flex align-items-center gap-2">
                  <div class="icon">
                    <!-- 使用 font-awesome-icon 组件 -->
                    <font-awesome-icon :icon="['fas', 'bed']" />
                  </div>
                  <p class="card-feature-description">3 Bedrooms</p>
                </div>
              </div>
              <div class="col-12 col-sm-6">
                <div class="card-feature-item d-flex align-items-center gap-2">
                  <div class="icon">
                    <font-awesome-icon :icon="['fas', 'bath']" />
                  </div>
                  <p class="card-feature-description">2 Baths</p>
                </div>
              </div>
              <div class="col-12 col-sm-6">
                <div class="card-feature-item d-flex align-items-center gap-2">
                  <div class="icon">
                    <font-awesome-icon :icon="['fas', 'user']" />
                  </div>
                  <p class="card-feature-description">4 Guest</p>
                </div>
              </div>
              <div class="col-12 col-sm-6">
                <div class="card-feature-item d-flex align-items-center gap-2">
                  <div class="icon">
                    <font-awesome-icon :icon="['fas', 'users']" />
                  </div>
                  <p class="card-feature-description">4 Sleeps</p>
                </div>
              </div>
              <div class="col-12">
                <div class="card-feature-item d-flex align-items-center gap-2">
                  <div class="icon">
                    <font-awesome-icon :icon="['fas', 'map-marked-alt']" />
                  </div>
                  <p class="card-feature-description">502 Little Lonsdale, Melbourne</p>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- 公司介绍 -->
    <div class="m-0 container-fluid text-center p-0 gsImg d-flex justify-content-end align-items-center">
      <div class="container">
        <div class="row d-flex justify-content-end">
          <div class="col-12 col-md-6 card p-4">
            <div class="card-body text-left gschoose pb-0">
              <h3>为什么选择我们公司呢？</h3>
              <p>让我们来看看下面的理由吧。</p>
            </div>
            <div class="card-body row pt-0 chooseResult">
              <div class="col-12 col-sm-12" v-for="(item, index) in items3" :key="index">
                <div class="card-gs-item d-flex align-items-center gap-4">
                  <div class="icon">
                    <!-- 使用 font-awesome-icon 组件 -->
                    <font-awesome-icon icon="circle-check" style="color: rgba(254,161,22,1); font-size: 35px;" />
                  </div>
                  <div class="text-left">
                    <h3>{{ item.title }}</h3>
                    <p>{{ item.description }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据统计 -->
    <div class="mb-3 pt-5 container-fluid datatotal">
      <div class="row text-center">
        <div class="col-12 hnumber">
          <div class="lined-title">
            <span class="line"></span>
            <h4>宠物关怀速览</h4>
            <span class="line"></span>
          </div>
        </div>
      </div>

      <div class="row mt-2">
        <div class="col-12 col-md-4">
          <div class="d-flex" ref="toyContainer">
            <div class="img-catup">
            <img src="../assets/images/catup.png" class="img-fluid" alt="">
          </div>
          <div class="img-toy" :style="{ transform: `rotate(${-rotationAngle}deg)`,transformOrigin: '50% 60%' }">
            <img src="../assets/images/toy.png" class="img-fluid" alt="">
          </div>
          </div>
        </div>
        <div class="col-12 col-md-8 col-sm-6">
          <div class="datas d-flex justify-content-center align-items-center">
            <ul class="d-flex flex-wrap flex-column flex-md-row justify-content-evenly align-items-center">
              <li>
                <span>
                  <animate-number :from="0" :to="18000" :duration="2000" :reload-interval="4000"></animate-number>
                </span>
                <h5>猫咪数量</h5>
              </li>
              <li>
                <span><animate-number :from="0" :to="3234" :duration="2000" :reload-interval="4000"></animate-number></span>
                <h5>被领养数量</h5>
              </li>
              <li>
                <span><animate-number :from="0" :to="32" :duration="2000" :reload-interval="4000"></animate-number></span>
                <h5>商品种类</h5>
              </li>
              <li>
                <span><animate-number :from="0" :to="18" :duration="2000" :reload-interval="4000"></animate-number></span>
                <h5>全国门店</h5>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>


    <!-- 猫咪领养 -->
    <div class="my-5 container">
      <div class="row text-center">
        <div class="col-12 hnumber">
          <div class="lined-title">
            <span class="line"></span>
            <h4>猫咪免费领养</h4>
            <span class="line"></span>
          </div>
          <h3 class="mb-3">寻找您未来的毛茸茸伙伴</h3>
          <h5 class="text-muted">我们精心挑选了可爱的猫咪，等待着它们的新家。从活泼的小猫到温柔的成年猫，总有一款适合您。</h5>
        </div>
      </div>

      <div class="row mt-5">
        <div class="col-12 col-md-4" v-for="(item, index) in items2" :key="index" @click="toCatDetail">
          <div class="card mb-4 shadow-sm">
            <img :src="item.img" class="card-img-top" alt="">
            <div class="card-body card-body-mm">
              <div class="d-flex align-items-center gap-2">
                <!-- 使用 font-awesome-icon 组件并结合 CSS 实现重叠效果 -->
                <div class="icon-container d-flex align-items-center justify-content-center">
                  <font-awesome-icon :icon="['fas', 'circle']" class="icon-circle" />
                  <span class="number-badge">{{ index + 1 }}</span>
                </div>
                <h5 class="mm-name">{{ item.name }}</h5>
              </div>
              <p class="mm-text mt-1">{{ item.description }}</p>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- 其他商品 -->
    <div class="my-5 container">
      <div class="row text-center">
        <div class="col-12 otherGoods d-flex justify-content-center items-align-center gap-5">
          <img src="../assets/images/paw1.png" alt="">
          <span>猜你需要</span>
          <img src="../assets/images/paw2.png" alt="">
        </div>
      </div>

      <div style="background-color: #fff;" class="container">
        <div class="lb">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div v-for="item in swiperList" :key="item.id" class="swiper-slide text-center" @click="toDetail">
                <img :src="item.imgUrl" alt="">
                <h5>{{ item.title }}</h5>
                <span>{{ item.price }}</span>
              </div>
            </div>
            <!-- <div class="swiper-pagination"></div> -->
            <!-- <div class="swiper-button-next"></div> -->
            <!-- <div class="swiper-button-prev"></div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入
import HeaderNav from "../components/HeaderNav.vue";
import AnimateNumber from "../components/AnimateNumber.vue";
import { assetTotal } from "../api/Page/index.js";

export default {
  name: "Home",
  components: {
    HeaderNav,
    AnimateNumber,

  },
  data() {
    return {
      items: [
        { title: "Las Vegas Strip Rooms", description: "Description for Home 1", img: require('../assets/images/bg1.jpg') },
        { title: "Standard Guest Rooms", description: "Description for Home 2", img: require('../assets/images/bg2.jpg') },
        { title: "Pool View Rooms", description: "Description for Home 3", img: require('../assets/images/bg1.jpg') }
      ],
      items2: [
        {
          name: "喵喵",
          description: "这是一只活泼好动的小猫，名叫小跳。她总是充满好奇心，喜欢探索新环境。小跳特别喜欢追逐玩具和与人互动，非常适合有时间和精力陪伴她的家庭。",
          img: require('../assets/images/mm1.jpg')
        },
        {
          name: "呜呜",
          description: "这位是温柔的喵喵，一只成年母猫。她性格温顺，喜欢安静地蜷缩在角落里晒太阳。喵喵对人类非常友好，是寻找一个安静伴侣的理想选择。",
          img: require('../assets/images/mm2.jpg')
        },
        {
          name: "无无",
          description: "这是调皮鬼小黑，一只年轻的公猫。他精力充沛，喜欢玩耍和攀爬。小黑非常聪明，容易训练，能够快速适应新环境。如果你喜欢充满活力的家庭氛围。",
          img: require('../assets/images/mm3.jpg')
        },
        {
          name: "忧忧",
          description: "这位是优雅的白雪，一只白色的长毛猫。她举止优雅，外表迷人，但内心却十分顽皮。白雪喜欢与人亲近，适合那些愿意花时间梳理她美丽毛发的家庭。",
          img: require('../assets/images/mm4.jpg')
        },
        {
          name: "圆圆",
          description: "这是勇敢的小灰，一只中等体型的公猫。他性格独立但不失友善，喜欢冒险和探索。小灰很容易相处，对于初次养猫的人来说是个理想的选择。",
          img: require('../assets/images/mm5.jpg')
        },
        {
          name: "绒绒",
          description: "最后介绍的是可爱的小花，一只混色的小母猫。她性格开朗，喜欢与人和其他动物互动。小花特别擅长撒娇，总能用她的甜美赢得所有人的心。",
          img: require('../assets/images/mm6.jpg')
        }
      ],
      items3: [
        {
          title: '多样化的宠物选择',
          description: '我们提供各种各样的宠物供您选择，从可爱的小猫小狗到异国风情的鸟类和爬行动物。'
        },
        {
          title: '免费领养服务',
          description: '我们致力于为每只宠物找到理想的家。所有领养都是免费的，只为爱找一个归宿。'
        },
        {
          title: '优质的宠物用品',
          description: '除了领养宠物，我们还提供高质量的宠物食品、玩具和护理用品，满足您的一切需求。'
        },
        {
          title: '完善的售后服务',
          description: '领养后，我们将继续为您提供支持，包括免费的初次健康检查和定期的咨询服务。'
        },
      ],
      swiper: null,
      swiperList: [{
        id: 1,
        title: '维斯康 VITSCAN宠物保健品海藻颗粒',
        imgUrl: require("../assets/images/sp1.jpg"),
        price: '98.00'
      }, {
        id: 2,
        title: '小佩饮水机 宠物自动喂食器智能饮水器',
        imgUrl: require("../assets/images/sp2.jpg"),
        price: '123.00'
      }, {
        id: 3,
        title: '宠物窝猫狗睡袋宠物猫咪垫子四季通用',
        imgUrl: require("../assets/images/sp3.jpg"),
        price: '28.00'
      }, {
        id: 4,
        title: '乐妃猫爬架 磨爪猫咪玩具宠物休闲娱乐',
        imgUrl: require("../assets/images/sp4.jpg"),
        price: '45.00'
      }, {
        id: 5,
        title: '怡亲猫砂 除臭膨润土猫沙 宠物猫砂',
        imgUrl: require("../assets/images/sp5.jpg"),
        price: '99.00'
      }, {
        id: 6,
        title: '猫狗天然植物除耳螨滴耳液耳漂洗耳水',
        imgUrl: require("../assets/images/sp6.jpg"),
        price: '67.00'
      }, {
        id: 7,
        title: '维克 营养膏克补软膏发育宠狗用猫用',
        imgUrl: require("../assets/images/sp7.jpg"),
        price: '39.00'
      }, {
        id: 8,
        title: '麦富迪 宠物猫粮藻趣儿 金枪鱼猫粮',
        imgUrl: require("../assets/images/sp8.jpg"),
        price: '89.00'
      }],

      initialScrollTop: null, // 记录玩具图片首次进入视口时的滚动位置
      rotationAngle: 0,       // 控制旋转的角度
      maxRotationAngle: 60,   // 最大旋转角度
    };
  },
  methods: {
    // 商品的轮播
    getSwiper() {
      this.swiper = new Swiper(".swiper-container", {
        loop: true, // 无缝
        autoplay: { //自动开始
          delay: 3000, //时间间隔
          disableOnInteraction: false, //*手动操作轮播图后不会暂停*
        },
        paginationClickable: true,
        slidesPerView: 4, // 一组三个
        spaceBetween: 30, // 间隔
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
        observer: true,
        observeParents: true,
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
          clickable: true, // 分页器可以点击
        },
        breakpoints: {
          // 当窗口宽度大于等于320px时，设置每屏显示数量为1
          320: {
            slidesPerView: 1,
          },
          // 当窗口宽度大于等于768px时，设置每屏显示数量为2
          768: {
            slidesPerView: 2,
          },
          // 当窗口宽度大于等于1024px时，设置每屏显示数量为4
          1024: {
            slidesPerView: 4,
          }
        }
      })
    },

    /**
    * @Title 跳转领养详情
    * @Author wcw
    * @Date 2024/12/31 11:44:11
    */
    toCatDetail() {
      this.$router.push({
        name: 'catatoptDetail',
        params: { id: '123' } // 确保传递了 id 参数
      });
    },
    // 跳转商品详情页
    toDetail() {
      this.$router.push({
        name: 'productsDetail',
        params: { id: '123' } // 确保传递了 id 参数
      });
    },


    handleScroll() {
      const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
      const toyRect = this.$refs.toyContainer?.getBoundingClientRect();

      if (toyRect && toyRect.top <= window.innerHeight && toyRect.bottom >= 0) {
        // 元素在视口内
        if (this.initialScrollTop === null) {
          // 第一次进入视口时记录初始滚动位置
          this.initialScrollTop = currentScrollTop;
        }

        // 计算滚动偏移量
        const scrollOffset = currentScrollTop - this.initialScrollTop;

        // 根据滚动偏移量计算旋转角度
        this.rotationAngle = Math.min(Math.max(-this.maxRotationAngle, scrollOffset / 10), this.maxRotationAngle);

        console.log(`滚动偏移量: ${scrollOffset}, 旋转角度: ${this.rotationAngle}`);
      } else {
        // 元素不在视口内，重置状态
        this.initialScrollTop = null;
        this.rotationAngle = 0;
      }
    }
  },

  beforeCreate(){
    assetTotal().then(res=>{
      console.log(res.data.data)
    })
  },
  mounted() {


    // 确保在组件挂载后初始化任何需要的 JavaScript
    this.$nextTick(() => {
      // 如果需要进一步初始化，请在这里添加代码
    });

    // 商品轮播
    this.getSwiper()

    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
};
</script>

<style scoped>
.lined-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.line {
  width: 80px;
  height: 2px;
  background: linear-gradient(to right,
      rgba(241, 159, 31, 0.3),
      /* 起始颜色带透明度 */
      rgba(255, 215, 0, 0.2)
      /* 结束颜色带透明度 */
    );
}

.hnumber h4 {
  color: #fea116;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.hnumber h3 {
  color: #41485a;
  font-size: 14px;
  font-weight: 700;
  line-height: 38px;
}

.hnumber h5 {
  color: #9a9a9a;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
  line-height: 28px;
  letter-spacing: 0.7px;
}

.card {
  border-radius: 5px;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  margin-bottom: 40px;
  background-color: #fff;
  overflow: hidden;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  transition: transform .2s;
  cursor: pointer;
  /* 动画效果 */
}

.card:hover {
  transform: scale(1.05);
  /* 鼠标悬停时放大 */
}

.card-body-content .card-type {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background-color: #01bcb3;
  padding: 6px 15px;
  margin-bottom: 20px;
  border-radius: 5px;
}

.card-body-content h5 {
  display: block;
  color: #41485a;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.card-body-content p {
  color: #9a9a9a;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
}

.card-feature svg {
  color: rgba(254, 161, 22, 1);
}

.card-feature .card-feature-description {
  display: inline-block;
  color: #9a9a9a;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0;
}

.card-feature .card-feature-item {
  margin-bottom: 1rem;
}

.card-body-mm h5 {
  display: block;
  color: #41485a;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 0px;
}

.card-body-mm p {
  color: #9a9a9a;
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
  padding-left: 20px;
  letter-spacing: 0.5px;
}

.icon-container {
  position: relative;
  width: 32px;
  /* 根据需要调整 */
  height: 32px;
  /* 根据需要调整 */
}

.icon-circle {
  font-size: 24px;
  /* 调整图标的大小 */
  color: rgba(254, 161, 22, 1);
  /* 根据需要调整颜色 */
}

.number-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  /* 调整字体大小 */
  color: white;
  /* 确保与背景对比明显 */
  font-weight: bold;
}

.gsImg {
  width: 100%;
  height: 900px;
  background-image: url('../assets/images/gs.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  /* 确保图片覆盖整个容器 */
  background-position: center;
  /* 图片居中 */
  background-attachment: fixed;
  /* 可选：使背景图固定，滚动时内容滚动而背景不动 */
}

.text-left {
  text-align: left;
}

.gschoose h3 {
  color: #41485a;
  font-size: 28px;
  font-weight: 700;
  line-height: 38px;
  padding: 0;
}

.gschoose p {
  color: #9a9a9a;
  font-size: 14px;
  font-weight: 500;
  /* margin-bottom: 25px; */
  line-height: 28px;
  letter-spacing: 0.7px;
}

.chooseResult h3 {
  color: #41485a;
  font-size: 18px;
  font-weight: 700;
  line-height: 38px;
  padding: 0;
}

.chooseResult p {
  color: #9a9a9a;
  font-size: 14px;
  font-weight: 500;
  /* margin-bottom: 25px; */
  line-height: 28px;
  letter-spacing: 0.7px;
}

.otherGoods span {
  letter-spacing: 4px;
  color: rgb(51, 51, 51);
  font-size: 24px;
  font-weight: bold;
}

/* 数据统计 */
.datatotal {
  background: rgba(255,239,213,.4);
}
.img-catup img{
  width: 400px;
}
.img-toy {
  width: 100px;
  height: 100px;
  margin-top: -50px;
}
.img-toy img{
  width: 150px;
  transition: transform 0.3s ease;
}
.datatotal .datas {
  width: 100%;
  height: 100%;
}
.datatotal .datas ul {
  width: 100%;
  height: 100%;
}
.datatotal .datas ul li{
  height: 130px;
}

.datatotal .datas span{
  color: #EF5030;
  font-size: 65px;
    font-family: 'Baloo Thambi', sans-serif;
    font-weight: bold;
    text-align: center;
}
.datatotal .datas h5{
    font-weight: bold;
    font-size: 28px;
    text-align: center;
}
/* 轮播样式 */
.lb {
  width: auto;
  margin: 0 auto;
  /* padding: 70px 0; */
  cursor: pointer;
}

.lb img {
  width: 290px;
  height: 362px;
}

.lb h5 {
  color: #999999;
  font-size: 13px;
  font-family: 微软雅黑;
  font-weight: normal;
  padding-top: 15px;
  padding-bottom: 8px;
}

.lb span {
  color: #ff9003;
  font-size: 18px;
  font-family: century gothic;
}

.swiper-slide {
  position: relative;
  height: 480px;
  width: 290px;
  padding: 36px 22px;
  background-repeat: no-repeat;
  background-size: contain;
  /* background-color: #F7F8FA; */
}
</style>
